<template>
  <select-box-group
    v-if="multiple"
    v-model:select="selectValue"
    type="multiple"
    @change="handleChange"
  >
    <!-- <select-box-option label="全部" :value="undefined"></select-box-option> -->
    <select-box-option
      v-for="item in options"
      :key="item[fieldNames.value]"
      :label="item[fieldNames.label]"
      :value="item[fieldNames.value]"
    ></select-box-option>
  </select-box-group>
  <select-box-group
    v-else
    v-model:select="selectValue"
    type="radio"
    @change="handleChange"
  >
    <!-- <select-box-option label="全部" :value="undefined"></select-box-option> -->
    <select-box-option
      v-for="item in options"
      :key="item[fieldNames.value]"
      :label="item[fieldNames.label]"
      :value="item[fieldNames.value]"
    ></select-box-option>
  </select-box-group>
</template>

<script lang="ts" setup>
import { ref, watch, withDefaults, toRef } from 'vue';
import selectBoxGroup from './selectBoxGroup.vue';
import selectBoxOption from './selectBoxOption.vue';
import { dictQueryByFlag } from '@/api/modules/dict';

const emits = defineEmits([
  'update:value',
  'update:name',
  'loadDictData',
  'change',
]);

// const { placeholder, value, flag, valueKey, appCode, multiple, isHttp, dataList, disabled, allowClear } = withDefaults(
const props = withDefaults(
  defineProps<{
    placeholder?: string; // 提示
    value: any; // 绑定的值
    name?: string; // 绑定的值
    flag?: string; // 字典标识
    valueKey?: string; // 值的key
    appCode?: string; // 字典所属应用编码
    multiple?: boolean; // 是否多选
    dataList?: Array<any>; // 字典数据列表
    isHttp?: boolean; // 是否通过http请求获取数据
    disabled?: boolean; // 是否停用
    allowClear?: boolean; // 是否允许清空
  }>(),
  {
    flag: '',
    valueKey: 'value',
    multiple: false,
    isHttp: true,
    dataList: () => [],
    disabled: false,
    allowClear: true,
  }
);

let options = ref<any[]>([]);
const selectValue = ref<any>(props.value);
// const dataListRef = toRef(props, 'dataList')

watch(
  () => props.value,
  (newVal) => {
    if (JSON.stringify(newVal) === JSON.stringify(selectValue.value)) {
      return;
    }
    selectValue.value = newVal;
  }
);

const fieldNames = {
  label: props.isHttp ? 'name' : 'label',
  value: props.isHttp ? props.valueKey : 'value',
};

if (props.isHttp) {
  dictQueryByFlag({
    flag: props.flag,
    appCode: props.appCode,
  }).then((res) => {
    options.value = res[props.flag];
    if (options.value) {
      emits('loadDictData', {
        map: (() => {
          const map: any = {};
          options.value.forEach((item) => {
            map[item.name] = item[props.valueKey];
          });
          return map;
        })(),
        arr: options.value,
      });
    }
  });
} else {
  options = toRef(props, 'dataList');
}

const formatData = (data: any[], key: string) => {
  if (typeof data === 'string') {
    const item = options.value.find((item) => item[fieldNames.value] === data);
    return item ? item[key] : undefined;
  } else if (typeof data === 'object') {
    const arr: string[] = [];
    data.forEach((el) => {
      const item = options.value.find((obj) => obj[fieldNames.value] === el);
      if (item) {
        arr.push(item[key]);
      }
    });
    return arr;
  }
};

const handleChange = (e: any) => {
  emits('update:value', e);
  const name = formatData(e, fieldNames.label);
  const dictDataIds = formatData(e, 'dictDataId');
  emits('update:name', name);
  emits('change', dictDataIds);
};
</script>

<style lang="less"></style>
